<template>
  <div class="container">
    <div class="page-header">
      <span class="title-item">入库管理</span>
    </div>
    <div class="page-body">
      <div class="page-body">
        <a-form-model layout="horizontal" :model="form" :colon="false" ref="ruleForm" :rules="rules">
          <a-row type="flex">
            <a-col :span="4" :offset="1">
              <a-form-model-item class="form-item" label="设备名称" prop="comparatorName">
                <a-input class="inline-input" v-model="form.comparatorName" placeholder="请输入设备名称"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="4" :offset="1">
              <a-form-model-item class="form-item" label="设备型号" prop="comparatorVersion">
                <a-input class="inline-input" v-model="form.comparatorVersion" placeholder="请输入设备型号"></a-input>
              </a-form-model-item>
            </a-col>
            <a-col :span="4" :offset="1">
              <a-form-model-item class="form-item" label="设备编号" prop="comparatorMn">
                <a-input class="inline-input" v-model="form.comparatorMn" placeholder="请输入设备编号"></a-input>
              </a-form-model-item>
            </a-col>
          </a-row>

          <a-row>
            <div class="uploadimg">
              <a-col :span="4" :offset="1">
                <a-form-item class="form-item" label="上传图片" :colon="false">
                  <a-upload :file-list="fileList" :remove="handleRemove" :before-upload="beforeUpload">
                    <a-button type="primary">
                      <a-icon type="upload" />上传
                    </a-button>
                  </a-upload>
                </a-form-item>
              </a-col>
            </div>
          </a-row>
          <a-row>
            <a-col class="submit-box">
              <a-button class="btn" type="primary" @click="compareAdd()">确认入库</a-button>
              <a-button type="reset" @click="() => form={}">重新填写</a-button>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import "moment/locale/zh-cn";
export default {
  name: "index",
  data() {
    return {
      form: {
        comparatorName: "",
        comparatorVersion: "",
        comparatorMn: "",
        img: "",
        userId:''
      },
      moment,
      // 上传图片
      fileList: [],
      uploading: false,
      rules:{
        comparatorName:[{ required: true, message: '设备名称必填', trigger: ['blur','change']}],
        comparatorVersion:[{ required: true, message: '设备型号必填', trigger: ['blur','change']}],
        comparatorMn:[{ required: true, message: '设备编号必填', trigger: ['blur','change']}]
      }
    };
  },
  mounted() {
    this.getId();
  },
  methods: {
    getId(){
      this.form.userId = this.$user.id
    },
    onTouruChange(e) {
      console.log(e);
    },
    handleRemove(file) {
      const index = this.fileList.indexOf(file);
      const newFileList = this.fileList.slice();
      newFileList.splice(index, 1);
      this.fileList = newFileList;
    },
    beforeUpload(file) {
      console.log(this.fileList,file)
      if(this.fileList.length>0){
        return this.$message.info("只能上传一张照片")
      }
      this.fileList = [file];
      return false;
    },
    // 入库
    compareAdd() {
      //上传excel
      if(this.fileList.length<=0){
        return  this.$message.warning("照片必传")
      }
      this.$refs.ruleForm.validate(valid=>{
        if(valid){
          const { fileList } = this;
          const formData = new FormData();
          fileList.forEach((file, index) => {
            formData.append("files[" + index + "]", file);
          });
          formData.append("comparatorName", this.form.comparatorName);
          formData.append("comparatorVersion", this.form.comparatorVersion);
          formData.append("comparatorMn", this.form.comparatorMn);
          this.uploading = true;
          console.log(formData);
          this.$api.PostsaveComparatorInfo(formData).then((res) => {
            console.log(res);
            if (res.data.code == 0) {
              this.$message.success("入库成功");
              this.form = {};
              this.fileList = [];
            } else {
              this.$message.error("入库失败");
            }
          });
        }
      })

    },
  },
};
</script>

<style scoped src="../../../assets/style/pollution.css"></style>
<style scoped lang="scss">

// 上传照片

.upimg {
  background-color: #207064;
  border-color: #207064;
}
::v-deep .ant-col .ant-form-item-control-wrapper {
  width: 80%;
}
::v-deep .ant-col .ant-form-item-label {
  width: 110px;
}
::v-deep .page-header {
  margin-left: 25px;
  margin-top: 30px;
}

::v-deep .ant-form-item {
  display: flex;
}
::v-deep .submit-box {
  float: right;
  margin-right: 200px;
  .btn{
    margin: 0 20px;
  }
}
// .ant-form-item-control-wrapper {
//   width: 100%;
// }
.page-body {
  margin-top: 70px;
}
</style>

